<template>
  <view>
	<cmd-nav-bar back :title="newsInfo.title"></cmd-nav-bar>
	<cmd-page-body type="top">
		<view class="content">
			<view class="banner" auto-focus>
			  <image class="banner-img" :src="newsInfo.thumbnail"></image>
			  <view class="title-area">
			    <text class="title-text">{{newsInfo.title}}</text>
			  </view>
			</view>
			<view class="article-meta">
			  <text class="article-meta-text article-author">{{newsInfo.createBy}}</text>
			  <text class="article-meta-text article-text">发表于</text>
			  <text class="article-meta-text article-time">{{newsInfo.createTime}}</text>
			</view>
			<view class="article-content">
			  <rich-text :nodes="content" style="font-size: 14px;"></rich-text>
			</view>
			<view class="comment-wrap"></view> 
		</view>
	</cmd-page-body>
  </view>
</template>

<script>
  import htmlParser from '@/common/html-parser'
  import { getNewsInfo } from '@/common/api'
  import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
  import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
  
  export default {
	components:{
	  	cmdNavBar,
		cmdPageBody
	},
    data() {
      return {
        newsInfo: {},
		content: '',
      }
    },
    onShareAppMessage() {
      return {
        title: this.newsInfo.title,
        path: '/pages/news/detail?id=' + this.newsInfo.id
      }
    },
    onLoad(option) {
      this.getDetail(option.id);
    },
    methods: {
      getDetail(id) {
		  // 获取新闻详情
		  getNewsInfo(id).then(res => {
		  	if (res.code == 200) {
		  		this.newsInfo = res.data;
				let content = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
				this.content = htmlParser(content);
			} 
		})
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-PLUS */
  page {
    min-height: 100%;
  }

  /* #endif */

  .banner {
    height: 180px;
    position: relative;
    background-color: #ccc;
    flex-direction: row;
    overflow: hidden;
  }

  .banner-img {
	width: 100%;
    flex: 1;
  }

  .title-area {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: 11;
  }

  .title-text {
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    lines: 2;
    color: #ffffff;
    overflow: hidden;
  }

  .article-meta {
    padding: 10px 15px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .article-meta-text {
    color: gray;
  }

  .article-text {
    font-size: 12px;
    line-height: 25px;
    margin: 0 10px;
  }

  .article-author {
    font-size: 15px;
  }

  .article-time {
    font-size: 15px;
  }

  .article-content {
    font-size: 15px;
    padding: 0 15px;
    margin-bottom: 15px;
    overflow: hidden;
  }

  /* #ifdef H5 */

  .article-content {
    line-height: 1.8;
  }

  .article-content img {
    max-width: 100%;
  }

  /* #endif */
</style>